<template>
	<div :class="{'choose-icon-dialog-body-height':isScroll}">
		<el-dialog v-bind="$attrs" v-model="dialogVisible">
			<template #default>
				<xform @before-remove="beforeRemove" @on-exceed="handleExceed" label-width="100px" ref="form" :options="options">
					<template #default>
						<slot name="default"></slot>
					</template>
					<template #tip>
						<slot name="tip"></slot>
					</template>
				</xform>
			</template>
		
			<template #footer>
				<slot :form="form" name="footer"></slot>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="modalForm">
	import {
		ref,
		watch
	} from 'vue'

	let props = defineProps({
		visible: {
			type: Boolean,
			default: false
		},
		options: {
			type: Array,
			required: true
		},
		beforeRemove: {
			type: Function
		},
		handleExceed: {
			type: Function
		},
		
		isScroll: {
			type: Boolean,
			default: false
		}
	})

	let form = ref()

	let emits = defineEmits(['update:visible'])

	let dialogVisible = ref(props.visible)

	watch(() => props.visible, val => {
		dialogVisible.value = val
	})

	watch(() => dialogVisible.value, val => {
		emits('update:visible', val)
	})
</script>

<style scoped>

</style>
